<template>
    <div class="page-pd bottom-ctn">
        <h3 class="title-ln">
            <div class="primay-color">{{fgObjTitle || ''}}列表显示</div>
        </h3>
        <div>
            <div class="flex-fields">
                <div v-for="field in fieldList" :key="field.id">
                    <el-checkbox v-model="field.checked" @change="resetSortData">{{field.name}}
                    </el-checkbox>
                </div>
            </div>
        </div>
        <br/>
        <br/>
        <br/>
        <h3 class="title-ln">
            <el-tooltip class="item" effect="light" content="拖动列边缘调整列宽，拖动字段调整顺序" placement="top">
                <div class="primay-color">列宽、排序设置</div>
            </el-tooltip>

            <el-button @click="setWidthAuto" size="small" type="text" class="right" title="根据标题设置列宽">自动列宽</el-button>
        </h3>

        <table-view v-if="!refreshing" border resizable ref="table" :tablehead="tableCols"
                    :tabledata="[{}]" :loading="false"
                    stripe :filter="{}" :auto-load="false"
                    :total="0" @header-dragend="setWidth"
        ></table-view>
        <footer class="flex-center bottom-bts">
            <el-button @click="saveFields" type="primary" size="medium">{{fgTexts.save || '保存'}}</el-button>
        </footer>
        <debug-info :info="checkedFields"></debug-info>
        <!--<debug-info :info="checkedFields" style="left: 30%"></debug-info>-->
    </div>
</template>

<script>
import tableView from 'party_fe_component/src/components/tableView'
import { PageTypes } from '../common/const';
import { modifyPage, modifyPageCur } from '../common/api';

export default {
    mixins: [
        require('../common/fgFormMixin').default,
        require('../common/textConfigMixin').default,
        require('../common/orgTagMixin').default,
        require('../common/fieldSortMixin').default,
    ],
    data() {
        return {
            fieldList: [],
            uiPage: null,
            refreshing: false,
            currentPath: '',
            curPathList: ['/member/fieldsCur', '/org/fieldsCur'],
        };
    },
    created() {
        this.currentPath = this.$route.path
        this.loadFormName().then(t => {
            this.loadSceneConfigs(this.getPageName())
            this.loadUI()
        })
    },
    methods: {
        // 用于文案加载
        getPageName() {
            return 'fields' + this.formName
        },
        loadUI() {
            let loadFuncList = [this.loadFieldList()]
            if (this.curPathList.includes(this.currentPath)) {
                loadFuncList.push(this.loadUIPageCur(this.formName))
            } else {
                loadFuncList.push(this.loadUIPage(this.formName, PageTypes.Table))
            }
            Promise.all(loadFuncList).then(res => {
                this.uiPage = res[1]

                var fieldList = res[0].data || []
                fieldList.map(fd => {
                    var col = this.gridCols.find(col => fd.field === col.field)
                    fd.checked = !!col
                })

                this.fieldList = fieldList

                this.sortData = this.gridCols
                this.doSort()
            })
        },
        doSort() {
            setTimeout(t => this.startSort('.el-table__header tr'), 20)
        },
        saveFields() {
            if (!this.checkedFields.length) {
                return this.$x.toast.warning(this.fgTexts.checkFields || '请至少勾选一个字段')
            }

            // this.uiPage.ui.gridCols = this.checkedFields.map(fd => {
            //     var col = this.gridCols.find(col => col.field === fd.field) || {}
            //     return this.newCol(fd, col.width)
            // })
            if (this.curPathList.includes(this.currentPath)) {
                modifyPageCur(this.formName, this.uiPage).then(res => {
                    this.$x.toast.success(this.fgTexts.saveSuccess || '保存成功!')
                })
            } else {
                modifyPage(this.uiPage._tplId, this.uiPage.id, this.uiPage).then(res => {
                    this.$x.toast.success(this.fgTexts.saveSuccess || '保存成功!')
                })
            }
        },
        newCol(fd, width) {
            return {
                field: fd.field,
                title: fd.name,
                width: width || 100,
                // format: 'yyyy-MM-dd'
            }
        },
        setWidth(newWidth, oldWidth, column) {
            var col = this.gridCols.find(fd => fd.field === column.property)
            if (col) {
                col.width = newWidth
            }
        },
        setWidthAuto() {
            this.gridCols.map(col => {
                col.width = Math.max((col.title || ' ').length * 12 + 22, col.width || 0, 60)
            })
        },
        resetSortData() {
            this.fieldList.map(fd => {
                if (fd.checked) {
                    if (!this.gridCols.find(col => col.field === fd.field)) {
                        this.uiPage.ui.gridCols.push(this.newCol(fd))
                    }
                } else {
                    var index = this.gridCols.findIndex(col => col.field === fd.field)
                    if (index > -1) {
                        this.uiPage.ui.gridCols.splice(index, 1)
                    }
                }
            })
        },
        onSortEnd(sortData) {
            // 由于sortablejs绑定了el-table，需要强制刷新表格
            this.refreshing = true
            this.stopSort()
            this.$nextTick(t => {
                this.refreshing = false
                this.doSort()
            })
        }
    },
    computed: {
        fgObjTitle() {
            // 子类实现
            return ''
        },
        checkedFields() {
            return this.fieldList.filter(fd => fd.checked)
        },
        gridCols() {
            if (this.uiPage) {
                return this.uiPage.ui.gridCols
            }
            return []
        },
        tableCols() {
            return this.sortData.map(col => {
                //var fd = this.fieldList.find(field => col.field === field.field) || {}
                return {
                    prop: col.field,
                    label: col.title,
                    minWidth: col.width || 100,
                    // props: { align: 'center' }, //其他属性
                }
            })
        }
    },
    components: {
        tableView
    }
}
</script>

<style scoped lang="scss">
    @import "../../css/defines";

    .flex-fields {
        display: inline-flex;
        flex-flow: wrap;

        > div {
            line-height: 30px;
            width: 275px;
        }
    }

    .title-ln {
        border-bottom: 1px solid #DBDBDB;
        line-height: 1;
        margin-bottom: 10px;

        > div {
            display: inline-block;
            border-bottom: 2px solid $--color-primary;
            padding-bottom: 20px;
            transform: translateY(1px);
        }
    }
</style>
